<template>
  <el-row :gutter="20">
    <el-col>
      <el-card class="cardStyle">
        <div class="header_title">
          <span>👏 欢迎使用地震应急指挥平台</span>
          <!-- 大屏展示 -->
          <el-button plain type="primary" @click="toScreen"><span>大屏展示</span><el-icon class="ml-8px" size="16"><Switch /></el-icon></el-button>
        </div>
      </el-card>
    </el-col>
    <el-col style="height: 60px;display: flex;align-items: center;">
      <span class="ml-20px">地震数据统计</span>
      <div style="width: 235px;">
        <el-date-picker v-model="dateRanges" :type="typerange" value-format="YYYYMMDD" class="dateRanges"
        range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期" :disabled-date="disabledDate"
        @change="changeDateRange" :clearable="false" />
      </div>
      <el-radio-group v-model="radio" class="noneBorder" style="margin-left: 10px;background-color: rgba(0,0,0,0);">
        <el-radio-button :value="0">年</el-radio-button>
        <el-radio-button :value="1">月</el-radio-button>
        <el-radio-button :value="2">日</el-radio-button>
      </el-radio-group>
    </el-col>
  </el-row>
  <el-row :gutter="10" justify="space-between">
    <el-col :span="6">
      <el-card :body-style="{ height: '110px',color: '#333',fontSize:'14px' }" class="cardStyle bgIcon1">
        <span class="title">{{form.provinceName}}3级以上地震</span>
        <div style="display: flex;">
          <p class="mlr8">共<span class="heightLight">{{ form.threeMoreThan }}</span>个</p>
          <p class="ml-30px mlr8">最大<span class="heightLight">{{ form.threeMoreThanMax }}</span>级</p>
        </div>
        <span>{{ form.threeMoreThanInfo }}</span>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card :body-style="{ height: '110px',color: '#333',fontSize:'14px' }" class="cardStyle bgIcon1">
        <span class="title">全球6级以上地震</span>
        <div style="display: flex;">
          <p class="mlr8">共<span class="heightLight">{{ form.sixMoreThan }}</span>个</p>
          <p class="ml-30px mlr8">最大<span class="heightLight">{{ form.sixMoreThanMax }}</span>级</p>
        </div>
        <span>{{ form.sixMoreThanInfo }}</span>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card :body-style="{ height: '110px',color: '#333',fontSize:'14px' }" class="cardStyle bgIcon2">
        <span class="title">全国地震省份排名</span>
        <div v-for="(item, index) in form.provinceRankingVoList" :key="item"  class="ulList">
          <span class="numberStyle">{{ index + 1 }}</span>
          <span style="margin: 0 15px;display: inline-block;width: 40px;">{{ item.name }}</span>
          <span style="display: inline-block;width: 25px;">{{ item.count }}</span>
          <el-progress style="width:130px;display: inline-block;margin-left: 10px;"  :percentage="(item.count / (Array.from(form.provinceRankingVoList, (item) =>
            Number(item['count'])).reduce((prev, cur) => prev + cur)) * 100)" color="#409eff">
            <span></span>
          </el-progress>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card :body-style="{ height: '110px',color: '#333',fontSize:'14px' }" class="cardStyle bgIcon2">
        <span class="title">{{form.provinceName}}地震排名</span>
        <div v-for="(item, index) in form.earthquakeRankingVoList" :key="item" class="ulList">
          <span class="numberStyle">{{ index + 1 }}</span>
          <span style="margin: 0 15px;display: inline-block;width: 35px;">{{ item.shockLevel }}级</span>
          <span>{{ item.macroscopic }}</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="10" style="margin-top: 10px;">
    <el-col :span="12">
      <el-card :body-style="{ height: '400px' }" class="cardStyle">
      <ScattersChart :data="form.distributionVoList" @updateScreenData='updateScreenData'  />
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card class="cardStyle">
        <StackedAreaChart :data="form.statisticsVoList" />
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="10" style="margin-top: 10px;">
    <el-col :span="12">
      <el-card class="cardStyle">
        <ConcentricCirclesEcharts :data="form.statisticsVoList" title="地震频次" />
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card class="cardStyle"> 
        <StackedBarChart :data="form.chartData" />
      </el-card>
    </el-col>
  </el-row>
  <ByTrend  ref="bytrend" :disabledDate="disabledDate" />
</template>
<script lang="ts" setup name="Home">
import request from '@/config/axios'
import moment from 'moment';
import { formatDate } from '@/utils/formatTime'
// 引入echarts组件
import ScattersChart from './components/ScattersChart.vue'
import StackedAreaChart from './components/StackedAreaChart.vue'
import ConcentricCirclesEcharts from './components/ConcentricCirclesEcharts.vue'
import StackedBarChart from './components/StackedBarChart.vue'
import ByTrend from './components/ByTrend.vue'
import {getConfigInfo} from '@/views/gis/api/config'

const message = useMessage() // 消息弹窗
const router = useRouter()
// 获取当前日期
const today = new Date(); // 当前日期
const oneYearAgo = new Date(today);

oneYearAgo.setMonth(today.getMonth() - 11);

// 定义日期范围，格式为 [开始日期, 结束日期]
const dateRanges = ref<any>([formatDate(oneYearAgo, "YYYYMMDD"), formatDate(today, 'YYYYMMDD')]);
const disabledDate = (time) => {
  return time.getTime() > Date.now()
}
const radio = ref(1)
const typerange: any = ref('monthrange')

const form = ref({
  "provinceName": "国家级",
  "threeMoreThan": 698,
  "threeMoreThanMax": 8,
  "sixMoreThan": 8,
  "sixMoreThanMax": 8,
  "provinceRankingVoList": [
    {
      "name": "四川省",
      "count": 698
    }
  ],
  "earthquakeRankingVoList": [
    {
      "shockLevel": 8,
      "macroscopic": "四川汶川县"
    },
    {
      "shockLevel": 7.2,
      "macroscopic": "四川松潘、平武间"
    },
    {
      "shockLevel": 7,
      "macroscopic": "四川阿坝州九寨沟县"
    }
  ],
  "statisticsVoList": [],
  "chartData": {
    "provinceData": ["四川省","甘肃省"],
    "chartData": [
      {
        "data": [548,0],
        "name": "3.0-3.9"
      },
      {
        "data": [111,0],
        "name": "4.0-4.9"
      },
      {
        "data": [38,1],
        "name": "5.0+"
      }
    ]
  },
  'sixMoreThanInfo':"四川阿坝州壤塘县4.2地震",
  'threeMoreThanInfo':"四川阿坝州壤塘县4.2地震",
  'provinceName':'全国'
})
const years = ref([]);
const months = ref([]);
const days = ref([]);
const province = ref('');//省份
// 获取数据
const getAllData = () => {
  let data = {
    startTime: dateRanges.value[0],
    endTime: dateRanges.value[1],
    type: radio.value,
       province:province.value
  }
  switch (radio.value) {
    case 0:
      year.value = [data.startTime, data.endTime]
      data.startTime = dateRanges.value[0].substring(0, 4);
      data.endTime = dateRanges.value[1].substring(0, 4);
      break;
    case 1:
      month.value = [data.startTime, data.endTime]
      data.startTime = dateRanges.value[0].substring(0, 6);
      data.endTime = dateRanges.value[1].substring(0, 6);
      break;
    case 2:
      day.value = [data.startTime, data.endTime]
      data.startTime = dateRanges.value[0].substring(0, 8);
      data.endTime = dateRanges.value[1].substring(0, 8);
      break;
    default:
  }
  request.post({ url: '/largeScreen/index', data }).then(res => {
    console.log(res);
    
    form.value = res;
  }).catch(error => {

  })
}
// 获取区间年月日
const generateDates = () => {
  const startDate = new Date(moment(dateRanges.value[0]));
  const endDate = new Date(moment(dateRanges.value[1]));
  let currentDate = new Date(startDate);
  years.value = [];
  months.value = [];
  days.value = [];
  const chartLabels: any = ref([]);
  while (currentDate <= endDate) {
    years.value.push(currentDate.getFullYear() + '年');
    months.value.push(currentDate.getMonth() + 1 + '月'); // Months are zero-based
    days.value.push(currentDate.getDate() + '日');
    if (radio.value === 2) {
      currentDate = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000); // add one day
    } else if (radio.value === 1) {
      currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1); // add one month
    } else if (radio.value === 0) {
      currentDate = new Date(currentDate.getFullYear() + 1, 0, 1); // add one year
    }
  }
  
  switch (radio.value) {
    case 0:
      chartLabels.value = years.value;
      if (chartLabels.value.length > 7) return message.warning('请选择时间范围不能大于7年');
      getAllData()
      break;
    case 1:
      chartLabels.value = months.value;
      if (chartLabels.value.length > 12) return message.warning('请选择时间范围不能大于12个月');
      getAllData()
      break;
    case 2:
      chartLabels.value = days.value;
      if (chartLabels.value.length > 31) return message.warning('请选择时间范围不能大于31天');
      getAllData()
      break;
    default:
      break;
  }
};
// 改变时间校验范围
const changeDateRange = () => {
  generateDates()
}
const bytrend = ref();
// 跳转大屏
const toScreen = async () => {

  let data = {
    startTime: dateRanges.value[0],
    endTime: dateRanges.value[1],
    type: radio.value,
    yearRange : bytrend.value.yearRange,
    name:form.value.provinceName
  }
  switch (radio.value) {
    case 0:
      data.startTime = dateRanges.value[0].substring(0, 4);
      data.endTime = dateRanges.value[1].substring(0, 4);
      break;
    case 1:
      data.startTime = dateRanges.value[0].substring(0, 6);
      data.endTime = dateRanges.value[1].substring(0, 6);
      break;
    case 2:
      data.startTime = dateRanges.value[0].substring(0, 8);
      data.endTime = dateRanges.value[1].substring(0, 8);
      break;
    default:
  }
  
  router.push({
    path: '/screen',
    query: {
      beforePath: router.currentRoute.value.path,
      data:JSON.stringify(data),
    }
  })
}
//获取大屏点击省
const updateScreenData =(name)=>{
  province.value = name;
  getAllData();
  bytrend.value.updateChart( province.value);
}

const getConfigUrl = ()=>{
  getConfigInfo().then(e=>{
    var obj = {}
    for (const item of e) {
      obj[item.key] = item.value;
    }
    sessionStorage.setItem("sysmapconfig",JSON.stringify(obj))
  })
}
onMounted(() => {
  if (document.fullscreenElement) {
    document.exitFullscreen();// 退出全屏
  }
  getAllData();
  getConfigUrl()
})
const year:any = ref([])
const month:any = ref([])
const day:any = ref([])

watch(radio, (val) => {
  if (val == 0) {
    if(year.value.length){
      dateRanges.value = year.value
    }else{
      dateRanges.value = [formatDate(oneYearAgo, "YYYYMMDD"), formatDate(today, 'YYYYMMDD')]
    }
    typerange.value = 'yearrange'

  } else if (val == 1) {
    if(month.value.length){
      dateRanges.value = month.value
    }else{
      dateRanges.value = [formatDate(oneYearAgo, "YYYYMMDD"), formatDate(today, 'YYYYMMDD')]
    }
    typerange.value = 'monthrange'
  } else {
    if(day.value.length){
      dateRanges.value = day.value
    }else{
      dateRanges.value = [formatDate(today, 'YYYYMMDD').substring(0, 6)+'01', formatDate(today, 'YYYYMMDD')]
    }
    typerange.value = 'daterange'
  }
  generateDates()
}, { immediate: true })
</script>

<style lang="scss" scoped>
.cardStyle{
  border-radius: 8px!important;
  background-color: rgba(0,0,0,0);
  background: linear-gradient(180deg, #DCECFF 0%, rgba(245, 249, 253, 0.6) 12%, rgba(232, 242, 252, 0.6) 100%);
  border-image: linear-gradient(180deg, #ABCCFA 0%, rgba(255, 255, 255, 0) 60%, #FFFFFF 100%) 1;
  .numberStyle{
    display: inline-block;
    width: 10px;
    text-align: center;
    font-family: YouSheBiaoTiHei!important;
    font-size: 16px!important;
  }
  .el-card__body{
    :nth-child(2) .numberStyle{
      color: #F34336
    }
    :nth-child(3) .numberStyle{
      color: #FF7723
    }
    :nth-child(4) .numberStyle{
      color: #FDCC00
    }
  }
}

.bgIcon1{
  background-image: url(@/assets/images/indexIcon1.png);
  background-size: cover; /* 覆盖整个容器并保持比例 */
  background-size: var(--bg-size) var(--bg-size);
  background-position: right center; /* 靠右中间对齐 */
  background-repeat: no-repeat; /* 不重复背景图 */
}

.bgIcon2{
  background-image: url(@/assets/images/indexIcon2.png);
  background-size: cover; /* 覆盖整个容器并保持比例 */
  background-size: var(--bg-size) var(--bg-size);
  background-position: right center; /* 靠右中间对齐 */
  background-repeat: no-repeat; /* 不重复背景图 */
}

.header_title {
  font-family: PingFangSC;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333333;
}

.heightLight {
  font-size: 24px;
  color: #3560F6;
  font-weight: 600;
}

.title{
  font-family: PingFangSC;
  font-size: 16px;
  font-weight: 600;
  color:#333333;
}

.ulList{
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
}

.mlr8 {
  margin-top: 8px;
  margin-bottom: 8px;
}
:deep(.el-radio-button:first-child){
  .el-radio-button__inner{
    border-left:1px solid #3560F6;
  }
} 
.noneBorder{
  :deep(.el-radio-button:nth-child(2)){
  .el-radio-button__inner{
    border-left:none;
    border-right:none;
  }
}
}
 
:deep(.el-radio-button__inner){
  border: 1px solid #3560F6;
  background-color: rgba(0,0,0,0);
}
:deep(.el-date-editor){
  margin-left: 5px;
  width: 210px;
  background-color: rgba(0,0,0,0)!important;
  color: #3560F6!important;
  border: 1px solid #3560F6!important;
  .el-range-input,.el-range-separator,.el-range__icon{
    color: #3560F6!important;
  }
}
.header {
  display: flex;
  /* 设置为弹性容器 */
  justify-content: space-between;
  /* 内容在左右两端对齐 */
  align-items: center;
  /* 垂直居中对齐 */
  padding-bottom: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
}

.warning {
  color: red;
  /* 设置警告文字颜色为红色 */
  font-weight: bold;
  /* 加粗字体 */
}
</style>